import React, { Component } from 'react';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, SegmentedControl, List, Button, Popup, Icon, DatePicker, TextareaItem, InputItem } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'

const pageName = 'question';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let maskProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  maskProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

@inject('appStore', 'languageStore')
@observer
class ModuleName extends ListMixin {
  constructor(props) {
    super(props);
    this.listApi = '/question/list';
    this.state = Object.assign({
      countryId: ""
    }, this.state);
  }

  // componentDidMount(){
  //   this.fetchActivity(1)
  // }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="question-item">
          <Link to={`/question/${rowData.questionId}`}>
            <img className="img" src={`${imgBaseUrl}${rowData.userImg}`}/>
            <div className="right">
              <div className="t"><span>{this.props.appStore.getNameById('countryEn', rowData.countryId)}</span>{rowData.userNickname}</div>
              <p className="p">{rowData.createTime}</p>
              <div className="con">
                {rowData.title}
              </div>
              <div className="con">
                {rowData.content}
              </div>
            </div>
          </Link>
          <div className="blank" style={{height: '.2rem'}}></div>
        </div>
      );
  }

  render() {
    const pageData = this.props.languageStore.getPageData(pageName);

    const { imgBaseUrl, commonData } = this.props.appStore;
    const countryEn = (commonData.countryEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    const { isLoading, currentPage, pageCount } = this.state;
    return (
      <div className={pageName}>
        <Top
          title={pageData.title}
        />
        <div className={`${pageName}-con`}>
          <div className="filter">
            <Picker data={countryEn} cols={1} value={this.state.countryId} onChange={(value)=>{
                this.doSearch({countryId: value[0]});
                this.setState({
                  countryId: value
                });
              }} className="forss">
              <List.Item arrow="horizontal">请选择国家</List.Item>
            </Picker>
					</div>
          <div className="list">
            <ListView ref="lv"
              dataSource={this.state.dataSource}
              renderFooter={this.renderFooter}
              renderRow={this.renderRow}
              className="fortest"
              pageSize={4}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onScroll={() => { console.log('scroll'); }}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={10}
              stickyHeader
            />
          </div>
          <a href="javascript:;" className="question-add" onClick={()=>{
            Popup.show(<div>
              <QuestionAdd
                countryEn={countryEn}
                onClose={()=>{
                  Popup.hide();
                }}
              />
            </div>, { animationType: 'slide-up', maskProps, maskClosable: false });
          }}><Icon type="cross" size="lg"/></a>
        </div>
      </div>
    )
  }
}

class QuestionAddModule1 extends React.Component {
  constructor(props){
    super(props);
  }

  submit = () => {
    const self = this;
    const option = self.props.form.getFieldsValue();
    if(!option.countryId){
      Toast.info('请选择国家');
      return;
    }else{
      option.countryId = option.countryId[0]
    }
    if(!option.title){
      Toast.info('请填写问题标题');
      return;
    }
    if(!option.content){
      Toast.info('请填写问题内容');
      return;
    }
    Ajax({
      url: '/question/add',
      data: option,
      success: function(result){
        Toast.info('提交成功');
        self.props.onClose();
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.props.onClose();
      }
    });
  }

  render() {
    const { getFieldProps } = this.props.form;
    return (<List renderHeader={() => (
        <div style={{ position: 'relative' }}>
          发布问题
          <span
            style={{
              position: 'absolute', right: 3, top: -5,
            }}
            onClick={() => this.props.onClose()}
          >
            <Icon type="cross" />
          </span>
        </div>)}
        className="popup-list"
        >
        <Picker data={this.props.countryEn} cols={1} {...getFieldProps('countryId')}>
          <List.Item arrow="horizontal">国家</List.Item>
        </Picker>
        <TextareaItem
          {...getFieldProps('title')}
          title="问题标题"
          autoHeight
          labelNumber={5}
        />
        <TextareaItem
          {...getFieldProps('content')}
          title="问题内容"
          autoHeight
          labelNumber={5}
        />
        <Button type="primary" style={{margin: '.2rem'}} onClick={() => this.submit()}>提交问题</Button>
      </List>)
  }
}
const QuestionAdd = createForm()(QuestionAddModule1);

module.exports = ModuleName
